<!-- 20230203 -->
<template>
    <view class="bar-area-cn">
        <!-- 组件内容 -->
        <view class="cn-content">
            <!-- 支付宝小程序 picker 组件不支持多列选择 -->
            <!-- <picker class="text-28" mode="multiSelector" bindchange="_bindRegionChange" :range="multiArray"
				:value="multiIndex" range-key="name" @columnchange="columnChange" @cancel @change="change">
				<view class="flex">
					<view class="flex-one text-28">
						<text v-if="district.province">{{district.province}} {{district.city}} {{district.area}}</text>
						<text class="text-b3" v-else>请选择所在地区</text>
					</view>
					<text class="tyIcon-arrow-right text-22 text-80"></text>
				</view>
			</picker> -->

            <view class="flex-one text-28 flex align-center" @click="show = true">
                <view class="flex-one">
                    <text v-if="district.province"
                        >{{ district.province }} {{ columnsNum >= 2 ? district.city : "" }}
                        {{ columnsNum == 3 ? district.area : "" }}</text
                    >
                    <text class="text-aa" v-else>请选择产品分类</text>
                </view>
                <text class="margin-left-30 tyIcon-arrow-right text-22 text-4d"></text>
            </view>
        </view>
        <!-- 组件浮层 -->
        <view class="cn-layer">
            <popup v-if="show" @overlayClick="show = false">
                <view class="layer-content" @click.stop="">
                    <view
                        class="confirm-bar line-height-80 padding-lr-30 bg-ff border-bottom-ed flex align-center justify-between"
                    >
                        <view class="text-cc"></view>
                        <view class="" style="color: #007aff" @click="submit">确定</view>
                    </view>
                    <picker-view
                        :value="multiIndex"
                        :indicator-style="indicatorStyle"
                        class="picker-view"
                        @change="change"
                    >
                        <picker-view-column>
                            <view
                                class="item"
                                v-for="(item, index) in multiArray[0]"
                                :key="index"
                                >{{ item.name }}</view
                            >
                        </picker-view-column>
                        <picker-view-column v-if="columnsNum >= 2">
                            <view
                                class="item"
                                v-for="(item, index) in multiArray[1]"
                                :key="index"
                                >{{ item.name }}</view
                            >
                        </picker-view-column>
                        <picker-view-column v-if="columnsNum == 3">
                            <view
                                class="item"
                                v-for="(item, index) in multiArray[2]"
                                :key="index"
                                >{{ item.name }}</view
                            >
                        </picker-view-column>
                    </picker-view>
                </view>
            </popup>
        </view>
    </view>
</template>

<script>
import popup from "@/components/pop-up.vue";
export default {
    components: {
        popup,
    },
    props: {
        // 行政规划省市区ID
        value: {
            type: Array,
            default: ["", "", ""],
        },
        // X级地址，省市县
        columnsNum: {
            type: Number,
            default: 3,
        },
    },
    data() {
        return {
            // 省市区规划
            districtList: [],
            // 选中索引
            multiIndex: [0, 0, 0],
            // 行政规划数组
            multiArray: [],
            // 当前选中ID和名称
            district: {},
            // 选择框浮层是否显示
            show: false,
            indicatorStyle: "height: 80rpx;",
            maskClass: "mask",
        };
    },

    watch: {
        value(newVal) {
            // 获取当前选中行政规划索引
            this.getMultiIndex().then((res) => {
                this.getMultiArray();
            });
        },
    },

    created() {
        if (!this.districtList.length) {
            this.$u.post("/api/shop/get_goods_category", {}).then((res) => {
                if (res.code == 1) {
                    this.districtList = res.data;
                    this.multiArray = [
                        this.districtList,
                        this.districtList[0].children,
                        this.districtList[0]._child[0].children,
                    ];
                }
            });
            // request.getData('base/district/api/District/getDistrict').then(res => {
            // 	if (res.code == 0) {
            // 		this.districtList = res.data.district_list
            // // 		// 行政规划初始值
            // 		this.multiArray = [
            // 			this.districtList,
            // 			this.districtList[0]._child,
            // 			this.districtList[0]._child[0]._child
            // 		]

            // // 		// 获取当前选中行政规划索引
            // 		this.getMultiIndex().then(res => {
            // 			this.getMultiArray()
            // 		})
            // 	}
            // })
        }
    },

    methods: {
        /**
         * 获取当前选中行政规划索引
         * @date 2023-02-03
         */
        getMultiIndex() {
            return new Promise((resolve, reject) => {
                let multiIndex = Array.apply(null, Array(this.columnsNum)).map(() => 0),
                    curProvinceList = [],
                    curCityList = [],
                    curAreaList = [];

                // 行政规划没有加载完成
                if (!this.districtList.length) {
                    resolve("");
                }

                // 是否有数据
                if (!this.value.length) {
                    resolve("");
                }
                // 数据是否有效，即不为''
                let isDataEffective = true;
                this.value.forEach((value, index) => {
                    if (value == "") {
                        isDataEffective = false;
                    }
                });
                if (!isDataEffective) {
                    resolve("");
                }

                // 省ID
                for (var i = 0; i < this.districtList.length; i++) {
                    if (this.districtList[i].id == this.value[0]) {
                        multiIndex[0] = i;
                        curCityList = this.districtList[i]._child;
                        break;
                    }
                }

                // 二级或三级推入城市列表
                if (this.columnsNum >= 2) {
                    // 市ID
                    for (var i = 0; i < curCityList.length; i++) {
                        if (curCityList[i].id == this.value[1]) {
                            multiIndex[1] = i;
                            curAreaList = curCityList[i]._child;
                            break;
                        }
                    }
                }

                // 三级推入地区列表
                if (this.columnsNum == 3) {
                    for (var i = 0; i < curAreaList.length; i++) {
                        if (curAreaList[i].id == this.value[2]) {
                            multiIndex[2] = i;
                            break;
                        }
                    }
                }
                // 当前选中行政规划索引
                this.multiIndex = multiIndex;
                resolve("");
            });
        },

        /**
         * 获取当前选中行政规划索引
         * @date 2023-02-03
         */
        getMultiArray() {
            let multiArray = [],
                curProvinceList = [],
                curCityList = [],
                curAreaList = [],
                province,
                city,
                area,
                provinceId,
                cityId,
                areaId;

            // 行政规划没有加载完成
            if (!this.districtList.length) {
                return false;
            }

            multiArray.push(this.districtList);

            // 省ID
            let i = this.multiIndex[0];
            province = this.districtList[i].name;
            provinceId = this.districtList[i].id;
            curCityList = this.districtList[i]._child;

            // 二级或三级推入城市列表
            if (this.columnsNum >= 2) {
                multiArray.push(curCityList);

                let i = this.multiIndex[1];
                city = curCityList[i].name;
                cityId = curCityList[i].id;
                curAreaList = curCityList[i]._child;

                // 三级推入地区列表
                if (this.columnsNum == 3) {
                    multiArray.push(curAreaList);

                    let i = this.multiIndex[2];
                    area = curAreaList[i].name;
                    areaId = curAreaList[i].id;
                }
            }

            // 行政规划数组
            this.multiArray = multiArray;

            // 当前选中ID和名称
            this.district = {
                // 省
                province: province,
                // 市
                city: city,
                // 区
                area: area,
                // 省ID
                province_id: provinceId,
                // 市ID
                city_id: cityId,
                // 区ID
                area_id: areaId,
            };

            this.$emit("confirm", {
                multiIndex: this.multiIndex,
                province: this.district.province,
                city: this.district.city,
                area: this.district.area,
                province_id: this.district.province_id,
                city_id: this.district.city_id,
                area_id: this.district.area_id,
            });
        },

        /**
         * 下拉框选择变化
         * @date 2023-02-03
         */
        // columnChange(e) {
        // 	let column = e.detail.column

        // 	let multiIndex = this.multiIndex
        // 	if (column == 0) {
        // 		multiIndex[column] = e.detail.value
        // 		multiIndex[1] = 0;
        // 		multiIndex[2] = 0;

        // 	} else if (column == 1) {
        // 		multiIndex[column] = e.detail.value
        // 		multiIndex[2] = 0
        // 	} else if (column == 2) {
        // 		multiIndex[column] = e.detail.value
        // 	}
        // 	this.multiIndex = multiIndex

        // 	this.getMultiArray()
        // },

        /**
         * 下拉框选择项改变
         * @param {Object} e
         * @date 2023-02-14
         */
        change(e) {
            let curMultiIndex = e.detail.value;
            if (curMultiIndex[0] != this.multiIndex[0]) {
                this.multiIndex = [curMultiIndex[0], 0, 0];
            } else if (curMultiIndex[1] != this.multiIndex[1]) {
                this.multiIndex = [this.multiIndex[0], curMultiIndex[1], 0];
            } else if (curMultiIndex[2] != this.multiIndex[2]) {
                this.multiIndex = [this.multiIndex[0], this.multiIndex[1], curMultiIndex[2]];
            }

            this.getMultiArray();

            // this.$emit("confirm", {
            // 	multiIndex: e.detail.value,
            // 	province: this.district.province,
            // 	city: this.district.city,
            // 	area: this.district.area,
            // 	province_id: this.district.province_id,
            // 	city_id: this.district.city_id,
            // 	area_id: this.district.area_id
            // })
        },

        /**
         * 确定
         * @date 2023-02-14
         */
        submit() {
            this.show = false;
            // this.$emit("confirm", {
            // 	multiIndex: this.multiIndex,
            // 	province: this.district.province,
            // 	city: this.district.city,
            // 	area: this.district.area,
            // 	province_id: this.district.province_id,
            // 	city_id: this.district.city_id,
            // 	area_id: this.district.area_id
            // })
        },
    },
};
</script>

<style scoped>
@import url(common.css);

.confirm-bar {
    position: fixed;
    bottom: 600rpx;
    left: 0;
    width: 750rpx;
    z-index: 999;
}

.picker-view {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 750rpx;
    height: 600rpx;
    background: #fff;
    z-index: 999;
}

.item {
    line-height: 80rpx;
    height: 80rpx;
    align-items: center;
    justify-content: center;
    text-align: center;
}
</style>
